<template>
	<view>
		<u-tabbar
			:value="currentTab"
			activeColor="#2D73F0"
			inactiveColor="#333"
			:safeAreaInsetBottom='false'
		>
			<u-tabbar-item 
				v-for="(item,i) in tabList" 
				:key="item.name"
				:text="item.text" 
				:name="item.name"
				@click="handTab(item)"
			>
				<image class="bar_img" slot='active-icon' :src="item.selectedIconPath"></image>
				<image class="bar_img" slot='inactive-icon' :src="item.iconPath"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>
 
<script>
	export default {
		name:"TabBar",
		props: {
			currentTab: {
				type: String,
				default: 'home'
			}
		},
		data() {
			return {
				tabList: [
					{
						"pagePath": "/pages/home/home",
						"iconPath": "../../static/tab_icons/home.png",
						"selectedIconPath": "../../static/tab_icons/home-active.png",
						"text": "首页",
						"name": 'home',
					},
					{
						"pagePath": "/pages/cart/cart",
						"iconPath": "../../static/tab_icons/cate.png",
						"selectedIconPath": "../../static/tab_icons/cate-active.png",
						"text": "分类",
						"name": 'cart',
					},
					{
						"pagePath": "/pages/mine/mine",
						"iconPath": "../../static/tab_icons/my.png",
						"selectedIconPath": "../../static/tab_icons/my-active.png",
						"text": "我的",
						"name": "mine"
					}
				]
			}
		},
		methods: {
			handTab(row) {
				uni.switchTab({
					url: row.pagePath
				})
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.bar_img{
		width: 54rpx;
		height: 54rpx;
	}
</style>